import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { inject, observer } from "@tarojs/mobx-rn";
import { View, ScrollView, Image, Text } from "@tarojs/components-rn";
import { toJS } from 'mobx';
import { getRuntime, pageSize, qualificationsTypeArr, subtime } from "../../utils/common";
import page3StyleSheet from "./page3_styles";
import icon_31 from '../../assets/img/icon_31.png';
import icon_32 from '../../assets/img/icon_32.png';
var _styleSheet = page3StyleSheet;

function _getClassName() {
  var className = [];
  var args = arguments[0];
  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();

  if (type === 'string') {
    args = args.trim();
    args && className.push(args);
  } else if (type === 'array') {
    args.forEach(function (cls) {
      cls = _getClassName(cls).trim();
      cls && className.push(cls);
    });
  } else if (type === 'object') {
    for (var k in args) {
      k = k.trim();

      if (k && args.hasOwnProperty(k) && args[k]) {
        className.push(k);
      }
    }
  }

  return className.join(' ').trim();
}

function _getStyle(classNameExpression) {
  var className = _getClassName(classNameExpression);

  var classNameArr = className.split(/\s+/);
  var style = [];

  if (classNameArr.length === 1) {
    style.push(_styleSheet[classNameArr[0].trim()]);
  } else {
    classNameArr.forEach(function (cls) {
      style.push(_styleSheet[cls.trim()]);
    });
  }

  return style;
}

let Business = class Business extends Component {
  constructor(props) {
    super(props);
    this.state = {
      typeArr: qualificationsTypeArr,
      typeIndex: null,
      allProvince: [],
      items: [],
      totalCount: 0,
      provinceId: null,
      pageIndex: 1,
      pageSize
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '建企资质服务中心' });
    this.getAllProvince();
    this.getAllQualificationServiceCenterInfo();
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  getAllProvince() {
    let { AreaStore } = this.props.stores;
    AreaStore.getAllProvinceFromLocal({
      callBack: res => {
        //console.log(res)
        this.setState({
          allProvince: res
        });
      }
    });
  }
  getAllQualificationServiceCenterInfo() {
    let { typeIndex, typeArr, pageIndex, pageSize, provinceId } = this.state;
    let { FinancialCenterStore } = this.props.stores;
    console.log(typeIndex);
    FinancialCenterStore.getAllQualificationServiceCenterInfo({
      qualificationsType: typeIndex ? typeIndex + 1 : null,
      areaCode: provinceId,
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({
            totalCount: toJS(res.totalCount),
            items: toJS(res.items)
          });
        } else {
          const { items } = this.state;
          items.push(...(res.items || []));
          this.setState({
            totalCount: res.totalCount,
            items
          });
        }
      }
    });
  }
  onReachBottom() {
    let { totalCount, pageSize, pageIndex } = this.state;
    const { loading } = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getAllQualificationServiceCenterInfo();
      });
    }
  }
  changeOption(type, value) {
    this.setState({
      [type]: value
    }, () => {
      this.getAllQualificationServiceCenterInfo();
      // console.log(this.state.typeIndex)
    });
  }
  getAreaTextByAreaCode(areaCode) {
    let { allProvince } = this.state;
    allProvince.map(item => {
      if (item.value === areaCode) {
        return item.label;
      } else {
        return areaCode;
      }
    });
  }
  render() {
    let { typeIndex, typeArr, allProvince, provinceId, items } = this.state;
    return <View style={_styleSheet["business-index"]}>
       <View style={_styleSheet["business-theme"]}>
         <View onClick={this.handelRouter.bind(this, '/pages/business/page1?type=7')} style={_styleSheet["theme"]}>
           <Image src={icon_31} style={_styleSheet["theme-img"]} />
          <View style={_styleSheet["theme-info"]}>
            <Text style={_styleSheet["title"]}>资质申办</Text>
            <Text style={_styleSheet["desc"]}>帮您轻松办资质</Text>
          </View>
         </View>
         <View onClick={this.handelRouter.bind(this, '/pages/business/page1?type=8')} style={_styleSheet["theme"]}>
           <Image src={icon_32} style={_styleSheet["theme-img"]} />
           <View style={_styleSheet["theme-info"]}>
             <Text style={_styleSheet["title"]}>资质升级</Text>
             <Text style={_styleSheet["desc"]}>提升竞争力和信誉度</Text>
           </View>
         </View>
       </View>
       <View style={_styleSheet["select-option"]}>
           <View style={_styleSheet["option-item"]}>
             <View onClick={this.changeOption.bind(this, 'typeIndex', null)} style={_getStyle(!typeIndex ? 'option all option-active' : 'option all')}>全部</View>
             <ScrollView scrollX scrollWithAnimation onScroll={this.onScroll} style={_styleSheet["scrollview"]}>
               {typeArr.map((item, index) => {
              return <View key={index} onClick={this.changeOption.bind(this, 'typeIndex', index)} style={_getStyle(typeIndex === index ? 'option option-active' : 'option')}>{item}</View>;
            })}
             </ScrollView>
           </View>
         <View style={_styleSheet["option-item"]}>
           <View onClick={this.changeOption.bind(this, 'provinceId', null)} style={_getStyle(!provinceId ? 'option all option-active' : 'option all')}>全部</View>
           <ScrollView scrollX scrollWithAnimation onScroll={this.onScroll} style={_styleSheet["scrollview"]}>
             {allProvince.map(item => {
              return <View key={item.value} onClick={this.changeOption.bind(this, 'provinceId', item.value)} style={_getStyle(provinceId === item.value ? 'option option-active' : 'option')}>{item.label}</View>;
            })}
           </ScrollView>
         </View>
       </View>

       <View style={_styleSheet["interval"]} />


       <View style={_styleSheet["list-03"]}>
         {items.length > 0 && items.map(item => {
          return <View onClick={this.handelRouter.bind(this, '/pages/business/page3_detail?id=' + item.id)} style={_styleSheet["list-03-item"]}>
                <View style={_styleSheet["label"]}>{item.qualificationsTypeName}</View>
                <View style={_styleSheet["r"]}>
                  <View style={_styleSheet["title"]}>{item.title}</View>
                  <View style={_styleSheet["price"]}>
                    {item.priceInterval}
                    <Text style={_styleSheet["small"]}>万</Text>
                  </View>
                  <View style={_styleSheet["info"]}>
                    <Text style={_styleSheet["date"]}>{subtime(item.creationTime)}</Text>
                    <Text style={_styleSheet["date"]}>{item.contactsArea}</Text>
                  </View>
                </View>
              </View>;
        })}
         {items.length <= 0 && <View style={_styleSheet["page-none-info"]}>没有相关信息~</View>}
       </View>

      <View onClick={this.handelRouter.bind(this, '/pages/business/page3_demand')} style={_styleSheet["page-submit"]}>我也要发布消息</View>
     </View>;
  }
};
Business = tslib_1.__decorate([inject("stores"), observer], Business);
export default Business;